<template>
	<view>
		<view class="order-address" v-if="addressMsg.length==0">
			<view class="flex align" style="justify-content: center;"
				@click="$toPage('/package/mine/setAddress/setAddress?setNew=true')">
				<image src="https://wx.2024csnl.com/static/goods/order-add.png" mode="aspectFill" class="order-add" />
				<view class="add-address">添加地址</view>
			</view>
		</view>

		<view class="" v-else>
			<!-- 	<view class="flex flex-end box">
				<view class="fl take-type take-left" v-for="(item,i) in freightList" :class="{active: type==i}"
					@click="checkType(i)">{{item.name}}</view>
			</view> -->
			<!-- 用户地址 -->
			<view class="order-address address-checked" v-if="type==0"
				@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
				<view class="between align">
					<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
					<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="into" />
				</view>
				<view class="info">
					<text>{{addressMsg.name}}</text>
					<text>{{addressMsg.tel}}</text>
				</view>
			</view>
			<!-- 商家地址 -->
			<!-- 		<view class="order-address address-checked" v-if="type==1"
				@click="openMap(freightList[1].storedata[0].longitude,freightList[1].storedata[0].latitude,freightList[1].storedata[0].name)">
				<view class="between align">
					<view class="address-info">{{freightList[1].storedata[0].name}}</view>
					<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="into" />
				</view>
				<view class="info">
					<text>{{freightList[1].storedata[0].address}} </text>
					<text>{{freightList[1].storedata[0].tel}}</text>
				</view>
			</view> -->
		</view>
		<view v-for="(m,idx) in allbuydata">
			<view class="order-infobox" v-for="(item,index) in m.prodata">
				<view class="order-info flex">
					<image :src="item.product.pic" mode="aspectFill" class="order-goods-img" />
					<view class="fl between column">
						<view class="font-l goods-name">{{item.product.name}}</view>
						<view class="goods-gg">规格：{{item.guige.name}}</view>
						<view class="between align">
							<view class="goods-gg">x{{item.num}}</view>
							<view class="order-goods-price c-red"><text class="price-util">￥</text>{{payMoney}}</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="between align order-info">
						<view class="">运费</view>
						<view class="">￥{{m.freightList[type].freight_price }}</view>
					</view>
					<view class="between align order-info">
						<view class="">订单备注</view>
						<view class="flex align">
							<input type="text" v-model="m.remark" class="discount input-box" placeholder="请先和商家协商一致"
								placeholder-class="p-c">
							<image src="https://wx.2024csnl.com/static/goods/into.png" mode="aspectFill" class="into" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="display: block;height: 98rpx;" />

		<view class="pay-box between align">
			<view class="">
				<text>待支付：</text>
				<text class="c-red">￥{{payMoney}}</text>
			</view>
			<view class="pay-now" @click="onSetSubmitOrder">立即支付</view>
		</view>
	</view>
</template>

<script>
	import {
		getBuyNow,
		setSubmitOrder,
		getPayType
	} from "../../api/index.js"
	export default {
		data() {
			return {
				remark: '',
				addressMsg: {},
				type: 0, //配送方式
				freightList: [], //配送方式列表
				payMoney: '', //待支付金额
				allbuydata: [], //订单详情
				payorderid: null, //提交订单后获取的id
				prodata: '',
			}
		},
		async onShow() {
			// 选取地址
			uni.$on('selectAddress', async (data) => {
				this.addressMsg = data
			})
			// 监听是否刷新
			uni.$on('refresh', async (data) => {
				this.onGetBuyNow()
			})
		},
		beforeDestroy() {
			uni.$off('selectAddress');
		},
		onLoad(opt) {
			this.prodata = opt.prodata
			this.onGetBuyNow()
		},
		methods: {
			// 立即购买
			async onGetBuyNow() {
				const res = await getBuyNow(`s=/ApiShop/buy&prodata=${this.prodata}`)
				const {
					address,
					allbuydata,
					status,
					userinfo,
					msg
				} = res.data
				// console.log(res, "立即购买")
				if (status == 1) {
					this.allbuydata = allbuydata
					this.freightList = allbuydata[0]?.freightList
					this.payMoney = userinfo.scoredkmaxmoney
					this.addressMsg = address
				} else {
					this.showToast(msg)
				}
			},
			// 支付方式
			async onGetPayType() {
				const res = await getPayType('s=/ApiPay/pay', {
					orderid: this.payorderid,
					thisurl: '',
					tourl: '',
					scene: 1001
				})
				console.log(res, "res----***")
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					const {
						money,
						// orderid
						id,
					} = data.payorder
					this.onSkip(`/business/pages/business_tab/orderPay?money=${money}&orderId=${id}`)
				} else {
					this.showToast(msg)
				}
			},
			// 提交订单
			async onSetSubmitOrder() {
				if (this.addressMsg.length == 0) {
					this.showToast('收货地址不能为空')
					return
				}
				const buydata = this.allbuydata.map(item => {
					return {
						bid: item.bid,
						prodata: item.prodatastr,
						cuxiaoid: item.cuxiaoid,
						freight_id: item.freightList[this.type].id,
						storeid: item.freightList[1].storedata[0].id,
						formdata: {
							form0: item.remark
						}
					}
				})
				const {
					id,
					name,
					tel
				} = this.addressMsg
				const res = await setSubmitOrder('s=/ApiShop/createOrder', {
					usescore: 0,
					addressid: id,
					linkman: name,
					tel: tel,
					buydata: buydata
				})
				const {
					payorderid,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.payorderid = payorderid
					this.onGetPayType()
				} else {
					this.showToast(msg)
				}
				console.log(res.data, "立即支付---")
			},
			openMap(lon, lat, name) {
				// console.log("获取经纬度ssssfff", lon, lat);
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 15,
					name: name
				})
			},
			checkType(i) {
				this.type = i
			}
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.p-c {
		color: #B3B3B3;
	}
</style>

<style lang="scss" scoped>
	.order-address {
		margin: 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		padding-bottom: 4rpx;
		min-height: 160rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	.box {
		margin: 20rpx;
		margin-bottom: 0;
		// background-color: #FFF4D1;
		border-radius: 20rpx 20rpx 0 0;

		.take-type {
			font-size: 27rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #FFF4D1;
		}

		.take-left {
			border-radius: 20rpx 0 20rpx 0;
		}

		.take-right {
			border-radius: 0 20rpx 0 0;
		}

		.active {
			background-color: #FFF;
			padding-top: 15rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.address-checked {
		margin-top: 0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.order-infobox {
		margin: 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 27rpx;

		.order-goods-shop {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.order-icon {
			width: 30rpx;
			height: 26rpx;
			margin-right: 20rpx;
		}

		.order-info {
			margin-top: 30rpx;

			.order-goods-img {
				width: 133rpx;
				height: 133rpx;
				margin-right: 25rpx;
				background-color: #B3B3B3;
				border-radius: 10rpx;
			}

			.goods-name {
				font-size: 29rpx;
			}

			.goods-gg {
				color: #B3B3B3;
			}

			.order-goods-price {
				font-size: 29rpx;

				.price-util {
					font-size: 24rpx;
				}
			}

			.order-card {
				background: #F8F8F8;
				padding: 20rpx;
				min-width: 248rpx;
				border-radius: 13rpx;
				border: 1rpx solid #F8F8F8;

				.order-value {
					color: #999999;
					font-size: 21rpx;
					margin-bottom: 21rpx;
				}
			}

			.active {
				border: 1rpx solid #27D1DC;
			}
		}

		.discount {
			margin-right: 16rpx;
		}

		.input-box {
			font-size: 27rpx;
			text-align: right;
		}

		.order-check {
			width: 34rpx;
			height: 34rpx;
		}


	}

	.pay-box {
		font-size: 27rpx;
		position: fixed;
		width: 96vw;
		bottom: 0;
		right: 0;
		padding-left: 27rpx;
		background-color: #FFF;

		.c-red {
			font-size: 33rpx;
		}

		.pay-now {
			font-size: 32rpx;
			background-color: #41644A;
			color: #FFF;
			line-height: 98rpx;
			padding: 0 32rpx;
		}
	}
</style>
